---
title: Color Mode Toggles
---

# Color Mode Toggles

Create a button to toggle between light and dark [color modes](/color-modes).

```jsx
/** @jsxImportSource theme-ui */
import { useColorMode } from 'theme-ui'

export default (props) => {
  const [mode, setMode] = useColorMode()

  return (
    <button
      {...props}
      onClick={(e) => {
        const next = mode === 'dark' ? 'light' : 'dark'
        setMode(next)
      }}
    />
  )
}
```

## Cycling through multiple modes

Create a button to cycle through multiple [color modes](/color-modes).

```jsx
/** @jsxImportSource theme-ui */
import { useColorMode } from 'theme-ui'

const modes = ['light', 'dark', 'purple', 'pink']

export default (props) => {
  const [mode, setMode] = useColorMode()

  return (
    <button
      {...props}
      onClick={(e) => {
        const index = modes.indexOf(mode)
        const next = modes[(index + 1) % modes.length]
        setMode(next)
      }}
    />
  )
}
```
